﻿<template>
  <div class="table-box">
    <dv-border-box-11 title="数据列表">
      <div id="table-list">
        <el-form :inline="true" class="demo-form-inline">
          <el-row :gutter="20">
            <el-col :span="18">
              <el-form-item label="序列号">
                <el-input v-model="searchParams.serial_number" placeholder="请输入内容"></el-input>
              </el-form-item>
              <el-form-item label="名称">
                <el-input v-model="searchParams.name" placeholder="请输入内容"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="searchQuery">查询</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="6" align="right">
              <el-form-item>
                <el-button type="primary" @click="addDialogVisible=true">新建</el-button>
              </el-form-item>
              <el-form-item>
                <el-button @click="handleDeleteSelect">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table
            ref="multipleTable"
            :data="accept_data.motors"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="50">
          </el-table-column>
          <el-table-column type="expand" width="28">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-row :gutter="50">
                  <el-col :span="10" :offset="2">
                    <el-form-item label="序列号">
                      <span>{{ props.row.serial_number }}</span>
                    </el-form-item>
                    <el-form-item label="电机名称">
                      <span>{{ props.row.name }}</span>
                    </el-form-item>
                    <el-form-item label="供应商">
                      <span>{{ props.row.manufacturer }}</span>
                    </el-form-item>
                    <el-form-item label="生产日期">
                      <span>{{ props.row.produce_date }}</span>
                    </el-form-item>
                    <el-form-item label="减速比">
                      <span>{{ props.row.gear_reduction_ratio }}</span>
                    </el-form-item>
                    <el-form-item label="状态">
                      <span>{{ props.row.status }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="额定扭矩">
                      <span>{{ props.row.power_rating }}</span>
                    </el-form-item>
                    <el-form-item label="额定电压">
                      <span>{{ props.row.voltage }}</span>
                    </el-form-item>
                    <el-form-item label="额定电流">
                      <span>{{ props.row.current_rating }}</span>
                    </el-form-item>
                    <el-form-item label="额定转速">
                      <span>{{ props.row.speed_rating }}</span>
                    </el-form-item>
                    <el-form-item label="备注">
                      <span>{{ props.row.remarks }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
              prop="serial_number"
              label="序列号"
              width="120">
          </el-table-column>
          <el-table-column
              prop="name"
              label="名称"
              width="120">
          </el-table-column>
          <el-table-column
              prop="manufacturer"
              label="供应商"
              width="120">
          </el-table-column>
          <el-table-column
              prop="produce_date"
              label="生产日期"
              width="120">
          </el-table-column>
          <el-table-column
              prop="status"
              label="状态"
              width="120">
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="props">
              <el-button
                  size="mini"
                  type="primary"
                  @click="handleEdit(props.row)">编辑
              </el-button>
              <el-button
                  size="mini"
                  @click="handleDelete(props.row.id)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="accept_data.page"
              :page-size="10"
              layout="total, prev, pager, next"
              :total="accept_data.count">
          </el-pagination>
        </div>
      </div>
    </dv-border-box-11>
    <el-dialog title="新建电机" :visible.sync="addDialogVisible" :inline="true" class="demo-form-inline"
               :append-to-body="true">
      <el-form :model="motor" size="small">
        <el-row :gutter="50">
          <el-col :span="10">
            <el-form-item label="序列号" :label-width="formLabelWidth">
              <el-input v-model="motor.serial_number"></el-input>
            </el-form-item>
            <el-form-item label="电机名称" :label-width="formLabelWidth">
              <el-input v-model="motor.name"></el-input>
            </el-form-item>
            <el-form-item label="供应商" :label-width="formLabelWidth">
              <el-select v-model="motor.manufacturer" placeholder="请选择供应商">
                <el-option label="零差云控" value="零差云控"></el-option>
                <el-option label="卓誉" value="卓誉"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="生产日期" :label-width="formLabelWidth">
              <el-date-picker
                  v-model="motor.produce_date"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="减速比" :label-width="formLabelWidth">
              <el-input v-model="motor.gear_reduction_ratio"></el-input>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
              <el-select v-model="motor.status" placeholder="电机状态">
                <el-option label="空闲" value="AVAILABLE"></el-option>
                <el-option label="损坏" value="DAMAGED"></el-option>
                <el-option label="维修" value="REPAIRED"></el-option>
                <el-option label="使用中" value="IN_USE"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="额定扭矩" :label-width="formLabelWidth">
              <el-input v-model="motor.power_rating"></el-input>
            </el-form-item>
            <el-form-item label="额定电压" :label-width="formLabelWidth">
              <el-input v-model="motor.voltage"></el-input>
            </el-form-item>
            <el-form-item label="额定电流" :label-width="formLabelWidth">
              <el-input v-model="motor.current_rating"></el-input>
            </el-form-item>
            <el-form-item label="额定转速" :label-width="formLabelWidth">
              <el-input v-model="motor.speed_rating"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入内容"
                  v-model="motor.remarks">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="addMotor">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑电机" :visible.sync="editDialogVisible" :inline="true" class="demo-form-inline"
               :append-to-body="true">
      <el-form :model="motor" size="small">
        <el-row :gutter="50">
          <el-col :span="10">
            <el-form-item label="序列号" :label-width="formLabelWidth">
              <el-input v-model="motor.serial_number"></el-input>
            </el-form-item>
            <el-form-item label="电机名称" :label-width="formLabelWidth">
              <el-input v-model="motor.name"></el-input>
            </el-form-item>
            <el-form-item label="供应商" :label-width="formLabelWidth">
              <el-select v-model="motor.manufacturer" placeholder="请选择供应商">
                <el-option label="零差云控" value="零差云控"></el-option>
                <el-option label="卓誉" value="卓誉"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="生产日期" :label-width="formLabelWidth">
              <el-date-picker
                  v-model="motor.produce_date"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="减速比" :label-width="formLabelWidth">
              <el-input v-model="motor.gear_reduction_ratio"></el-input>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
              <el-select v-model="motor.status" placeholder="电机状态">
                <el-option label="空闲" value="AVAILABLE"></el-option>
                <el-option label="损坏" value="DAMAGED"></el-option>
                <el-option label="维修" value="REPAIRED"></el-option>
                <el-option label="使用中" value="IN_USE"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="额定扭矩" :label-width="formLabelWidth">
              <el-input v-model="motor.power_rating"></el-input>
            </el-form-item>
            <el-form-item label="额定电压" :label-width="formLabelWidth">
              <el-input v-model="motor.voltage"></el-input>
            </el-form-item>
            <el-form-item label="额定电流" :label-width="formLabelWidth">
              <el-input v-model="motor.current_rating"></el-input>
            </el-form-item>
            <el-form-item label="额定转速" :label-width="formLabelWidth">
              <el-input v-model="motor.speed_rating"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入内容"
                  v-model="motor.remarks">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="editMotor">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
axios.defaults.baseURL = '/api'

export default {
  data() {
    return {
      accept_data: {
        page: 0,
        count: 1,
        motors: [
          {}
        ]
      },
      motor: {
        id: 0,
        name: '',
        serial_number: '',
        manufacturer: '',
        power_rating: '',
        voltage: '',
        current_rating: '',
        speed_rating: '',
        gear_reduction_ratio: '',
        arm_id: '',
        status: '',
        remarks: '',
        produce_date: ''
      },
      searchParams: {
        page: 1,
        name: '',
        serial_number: ''
      },
      config: {
        // header: ['组件', '分支', '覆盖率'],
        data: [],
        header: ['序列号', '名称', '供应商', '生产日期', '状态', '操作'],
        rowNum: 10, //表格行数
        headerHeight: 35,
        headerBGC: '#0f1325', //表头
        oddRowBGC: '#0f1325', //奇数行
        evenRowBGC: '#171c33', //偶数行
        index: true,
        columnWidth: [60, 130, 130, 130, 130, 130, 130],
        align: ['center']
      },
      multipleSelection: [],
      addDialogVisible: false,
      editDialogVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    searchQuery() {
      this.loading = true;
      // 远程搜索请求
      const params = this.searchParams;
      axios.get('/motor/search', {params}).then(
          response => {
            this.accept_data = JSON.parse(response.data)
          },
          // 失败
          error => {
            console.log('请求失败了', error.message)
          })
    },
    getMotors() {
      axios.get('/motor/search', {
        params: {
          page: 1,
          name: '',
          serial_number: ''
        }
      }).then(
          response => {
            this.accept_data = JSON.parse(response.data)
          },
          // 失败
          error => {
            console.log('请求失败了', error.message)
          })
    },
    handleEdit(row) {
      this.editDialogVisible = true;
      this.motor = row;
    },
    handleDelete(index) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete('/motor/delete/', {
          params: {
            motor_id: index
          }
        }).then(
            response => {
              this.$message({
                message: response.data.message,
                type: 'success',
                showClose: true
              })
              this.getMotors()
            },
            // 失败
            error => {
              this.$message.error({message: error.message, showClose: true});
              // console.log('请求失败了', error.message)
            })
        // location.reload()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleDeleteSelect() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id_list = [];
        this.multipleSelection.forEach(motor => {
          id_list.push(motor.id);
        });
        axios.delete('/motor/delete/selects/', {
          params: {
            ids: id_list
          }
        }).then(
            response => {
              this.$message({
                message: response.data.message,
                type: 'success',
                showClose: true
              })
              this.getMotors()
            },
            // 失败
            error => {
              this.$message.error({message: error.message, showClose: true});
            })
        // location.reload()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.searchParams.page = val;
      this.searchQuery();
    },
    editMotor() {
      axios.post('/motor/update/', this.motor
      ).then(
          response => {
            this.$message({
              message: response.data.message,
              type: 'success',
              showClose: true
            })
            this.getMotors()
            this.editDialogVisible = false
          },
          // 失败
          error => {
            this.$message.error({message: error.message, showClose: true});
          })
    },
    addMotor() {
      axios.post('/motor/create/', this.motor
      ).then(
          response => {
            this.$message({
              message: response.data.message,
              type: 'success',
              showClose: true
            })
            this.getMotors()
            this.addDialogVisible = false
          },
          // 失败
          error => {
            this.$message.error({message: error.message, showClose: true});
          })
    }
  },
  mounted() {
    this.getMotors();
  }
};
</script>

<style scoped lang="scss">
  .table-box {
    position: relative;
    width: 924px;
    height: 800px;
    padding: 0px;
    margin: 0px;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 50%;
    transform: translate(-50%);
  }

  #table-list {
    .el-table::before {
      background-color: #000000;
    }

    .el-table {
      color: #c3cbde;
    }

    .table-ctl {
      margin-right: 0px;
    }

    // 更改表头背景颜色
    ::v-deep .el-table thead tr > th {
      color: #ffffff;
      background-color: #0f1325;
    }

    // 更改表格每行背景颜色
    ::v-deep .el-table tbody tr > td {
      color: #efefef;
      background-color: #000555; //#14195d
    }

    // 设置鼠标经过时背景颜色
    ::v-deep .el-table tbody tr:hover > td {
      color: #ffffff;
      background-color: #003cac !important;
    }

    ::v-deep .el-table__cell {
      border: 0 !important;
    }

    ::v-deep .el-table tr {
      background-color: #000000;
    }

    ::v-deep .el-table__expand-icon {
      color: #ffffff;
    }

    ::v-deep .el-form-item__label {
      color: #ffffff;
    }

    ::v-deep .el-pagination button {
      color: #ffffff;
      background-color: #000000;
    }

    ::v-deep .el-pagination__total {
      color: #ffffff;
    }

    ::v-deep .el-pager li {
      background-color: #000000;
    }

    position: absolute;
    max-width: 95%;
    height: 50%;
    top: 60px;
    left: 50%;
    transform: translate(-50%);
  }

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #ffffff;
}

.demo-table-expand .el-form-item {
  left: 20px;
  margin-right: 0;
  margin-bottom: 0;
  width: 80%;
}
</style>